#joinus {
    margin:0;
    padding:0;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
}

#joinus .joinus_box_center {
   margin:0 auto;
   width:300px;
   color:#999;
   text-align:center;
}

#joinus .joinus_box_bottom {
    height:70px;
    width:100%;
    background:#dedede;
    font-size:13px;
    /*position:absolute;
    bottom:0px;
    left:0px;*/
    padding-top: 1px;
    margin-top:10px;
}

#joinus .jbc_des {
    font-size:13px;
    padding-top:10px;
    text-align:left;
}

#joinus .jbc_des_title {
    color:#D3AC67;
    font-size:20px;
    font-weight:bold; 
} 

#joinus .jbc_form .jbc_input{
    margin:10px 0 ;
}

#joinus .err{
    text-align:left;
    font-size:12px;
}

#joinus .jbc-frist,.jbc-second,.jbc-three {
    width:100%;
    height:50px;
    margin-bottom: 20px;
}

#joinus .jbc_form input{
    display: block;
    width: 89%;
    height: 25px;
    padding: 6px 0px 6px 30px;
    font-size: 14px;
    line-height: 1.0;
    color: #555;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#joinus #country {
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 100%;
    background: #f5f5f5 url('../../img/mnm/country.png') no-repeat;
    background-size:25px 25px;
    background-position : 2px center;
    padding-left : 30px;
    font-size:18px;
}


#joinus #age {
   padding: 12px 0px 6px 30px; 
   font-size:18px;
}


#joinus .input_email {
    background: url('../../img/mnm/mail.png') #f5f5f5 no-repeat;
    background-size:25px 25px;
    background-position:2px center;
}

#joinus .input_userName {
    background: url('../../img/mnm/username.png') #f5f5f5 no-repeat;
    background-size:25px 25px;
    background-position:2px center;
}

#joinus .input_passWord {
    background: url('../../img/mnm/lock.png') #f5f5f5 no-repeat;
    background-size:25px 25px;
    background-position:2px center;
}

#joinus .input_age {
    background: url('../../img/mnm/date.png') #f5f5f5 no-repeat;
    background-size:25px 25px;
    background-position:2px center;
}

#joinus .input_location {
    background: url('../../img/mnm/country.png') #f5f5f5 no-repeat;
    background-size:25px 25px;
    background-position:2px center;
}


#joinus .input_age_group {
    background: url('../../img/mnm/mail.png') #f5f5f5 no-repeat;
    background-size:25px 25px;
    background-position:2px center;
}

#joinus .input_zip {
    background: url('../../img/mnm/zip.png') #f5f5f5 no-repeat;
    background-size:25px 25px;
    background-position:2px center;
}

#joinus .jbb_top {
    height:20px;
    line-height:20px;
    margin:10px 0px 0px 0px;
    padding-left:15px;
    color:#48ABF1;
}

#joinus .jbb_bottom {
    height:20px;
    line-height:20px;
    margin:5px 0px 0px 0px;
    padding-left:15px;
    color:#999;
}

#joinus .jbb_bottom span{
    color:#000;
}


#joinus .jbc_or span {
   display: inline-block;
   height: 5px;
   border-top: 1px solid #ccc;
   width: 130px;
}

#joinus .jbc_or {
   font-size:13px;
   margin-top:10px;
}

#joinus .jbc-frist {
    margin-top:10px;
}

#joinus .jbc_facebook {
    margin-top:10px;
    color:#fff;
    width:100%;
    height:40px; 
    padding-left:40px;
    background: url('../../img/mnm/facebook_signin.png') no-repeat;
    background-size:100% 100%;
}

#joinus .joinus_back {
    position:absolute;
    left:0px;
    top:0px;
    display:block;
    width: 100px;
    height: 50px;
    background: url('../../img/mnm/back.png') no-repeat;
    background-size:30px 30px;
    background-position:10px center;
}

#joinus_tab_box {
    width:100%;
    overflow-x:hidden;
}

#joinus_tabs {
    width:300%;
    overflow-x:hidden;
}

#joinus .joinus_tab {
    width:33.333%;
    float:left;
}

#joinus .jb_color_span {
    width: 33.33%;
    display: inline-block;
    height: 4px;
    background: rgb(75, 75, 216);
}

#joinus .js_des {
    font-size:12px;
    padding-top:10px;
    text-align:left;
}

#joinus .js_des_title {
    color:#D3AC67;
    font-size:20px;
    font-weight:bold; 
} 

#joinus .js_img {
    width:100%;
    text-align:center;
    padding:10px 0;
}

#joinus .js_icon {
    height: 100px;
    width: 100px;
    border: 2px solid #ccc;
    margin: 0 auto;
    border-radius: 5px;
}

#joinus .js_your_gender {
    text-align:left;
    font-size:12px;
    font-weight:bold;  
}

#joinus .js_your {
    text-align:left;
    font-size:12px;
    font-weight:bold;  
}

#joinus .js_your_gender {
    width:100%;
    text-align:center;
    margin-top:10px;
    vertical-align:middle;
    height:5em;
}

#joinus .js_your_gender .span_block {
    display:inline-block;
    width:120px;
    border: 1px solid #ccc;
    border-radius: 5px;
    height:70px;
    background:#ccc;     
}

#joinus .jt_your {
    margin-top:20px;
}

#joinus .js_icon {
    width: 6em;
    height: 6em;
    background: url(../../img/mnm/signup_avatar.png) no-repeat center center;
    background-size: 6em 6em;
    margin: 0 auto;
    position: relative;
}

#joinus .add_icon {
    position: absolute;
    background: url(../../img/mnm/avatar_addicon.png) no-repeat center center;
    background-size: 100% 100%;
    right: 0;
    top: 0;
    width: 1.5em;
    height: 1.5em;
    display: block;
}


#joinus .gender_item {
    width: 42%;
    padding: 0;
    background: #f1f4f5;
    height: 5em;
    border-radius: 0.2em;
    -moz-border-radius: 0.2em;
    -webkit-border-radius: 0.2em;
    float: left;
    margin: 1em; 
}

#joinus .gender_item .gender_icon {
    width: 5em;
    height: 5em;
    margin: 0 auto;
}

#joinus .gender_item .man {
    background: url(../../img/mnm/gender_men.png) no-repeat center center;
    background-size: 100% 100%;
}

#joinus .gender_item .woman {
    background: url(../../img/mnm/gender_women.png) no-repeat center center;
    background-size: 100% 100%;
}

#joinus .gender_item .man_select {
    background: url(../../img/mnm/gender_men_select.png) no-repeat center center;
    background-size: 100% 100%;
}

#joinus .gender_item .woman_select {
    background: url(../../img/mnm/gender_women_select.png) no-repeat center center;
    background-size: 100% 100%;
}



#joinus .gender_item_woman_select {
    background: #e55e65;
}

#joinus .gender_item_man_select {
    background: #3fa6e7;
}

#file {
    display: block;
    border: 1px solid #000;
    width: 100px;
    height: 100px;
    opacity: 0;
    cursor: pointer;
    position: absolute;
    left: 0px;
    top: 0px;
}


#img_show {
    width: 95px;
    height: 95px;
    margin: 0px;
    position:absolute;
}

#img_show img{
    width: 95px;
    height: 95px;
    border-radius: 5px;
}

#progress {
    height: 10px;
    position: absolute;
    background:#f00;
    left: 5px;
    bottom: 5px;
}

#joinus .input_err {
    background-color: #fcd7d7;
}

.err {color:#ff0000;padding-left:10px;}

@media screen and (min-width: 640px) {

    #joinus .joinus_box_center {
       width:35em;
    }

    #joinus .jbc_form input{
       width:94%; 
    }

    #joinus .jbc_des p {
       text-align:center;
    }

    #joinus .gender_item {
       width: 45%;
    }

    #joinus .jbc_or span {
       width:47% 
    }

    #joinus .lookfor_age input {
      width:40%;
    }


}
